<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>资讯列表</title>
    <!--标准mui.css-->
	<link rel="stylesheet" href="/weixin/css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="css/app.css"/>
	<style type="text/css">
	    .mui-table-view-cell>a:not(.mui-btn) {
    	    word-break: normal;
    	    white-space:normal;
	    }
		.mui-table-view .mui-media-object {
	        line-height: 90px;
		    max-width: 90px;
		    height: 60px;
		}
		.lmj-p-img{
		    max-width: 100%;
       		height: auto;
		}
		.mui-table-view.mui-grid-view {
		    font-size: 0;
		    display: block;
		    width: 100%;
		    padding: 0 10px 0px 0;
		    white-space: normal;
		}
		.lmj-grid-li{
			margin-bottom: 10px;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
			height: auto;
			text-align: left;
		}
		#govModel4Ul img{
			width: 100%;
		}
	</style>
</head>
<body>
	<div class="mui-content" id="govContent">
		<div id="govSlider" class="mui-slider">
		</div>
		
		<ul id="govModel2Ul" class="mui-table-view">
			
		</ul>
		
		<ul id="govModel3Ul" class="mui-table-view mui-grid-view">
	        
	    </ul>
	    
	    
    	<ul class="mui-table-view" id="govModel4Ul">
    		
	    </ul>					
						
	</div>
</body>
	<script src="/weixin/js/mui.min.js"></script>
	<script src="/weixin/js/jquery.min.js"></script>
    <script>
      	mui.init({
			pullRefresh : {
			    container:"#govContent",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
			    up : {
			      height:50,//可选.默认50.触发上拉加载拖动距离
			      auto:true,//可选,默认false.自动上拉加载一次
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback :govPullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			}
		});
		
		function govPullupRefresh() {
			var liLength=jQuery("#govModel4Ul").find("li").length;
			pageNo=Math.ceil(liLength/5)+1;
			setTimeout(function() {
				mui.ajax('http://mwx.chinatoplady.cn/wx/portal/listRefresh',{
					data:{
						type:"1",
						pageNo:pageNo
					},
					type:'get',
					success:function(data){
						if(data.ok){
							var model4PullUp=data.result;
							for(var d=0;d<model4PullUp.length;d++){
								var liPullUpHtml="<li class='mui-table-view-cell mui-media'>"+
								"<a href='info-details.html' open-type='common' data-id='"+model4PullUp[d].id+"'>"+
								"<img class='lmj-p-img' src='"+model4PullUp[d].image+"'>"+model4PullUp[d].title+"<p class='mui-ellipsis'>"+model4PullUp[d].time+"</p></a></li>";
								jQuery("#govModel4Ul").append(liPullUpHtml);
							}
							if(model4PullUp.length==0){
								mui('#govContent').pullRefresh().endPullupToRefresh(true);
							}else{
								mui('#govContent').pullRefresh().endPullupToRefresh(false);
							}
							
						}
					},
					error:function(xhr,type,errorThrown){
						console.log(xhr);
						console.log(type);
						console.log(errorThrown);
					}
				});
			}, 1500);
		}
		
		setTimeout(function(){
			mui.ajax('http://mwx.chinatoplady.cn/wx/portal/index',{
				data:{
					type:"1",
					pageNo:"0"
				},
				type:"get",
				success:function(data){
					if(data.ok){
						//model1
						var model1=data.result.carousel;
						var model1Html="";
						for(var i=0;i<model1.length;i++){
							model1Html=model1Html+"<div class='mui-slider-item'><a href='javascript:;' data-id='"+model1[i].id+"'><img src='"+model1[i].image+"' /><p class='mui-slider-title'>"+model1[i].title+"</p></a></div>";
						}
						if(model1.length!=0){
							model1Html="<div class='mui-slider-item mui-slider-item-duplicate'><a href='javascript:;' data-id='"+model1[model1.length-1].id+"'><img src='"+model1[model1.length-1].image+"' /><p class='mui-slider-title'>"+model1[model1.length-1].title+"</p></a></div>"+model1Html;
							model1Html=model1Html+"<div class='mui-slider-item mui-slider-item-duplicate'><a href='javascript:;' data-id='"+model1[0].id+"'><img src='"+model1[0].image+"' /><p class='mui-slider-title'>"+model1[0].title+"</p></a></div>";
							model1Html="<div class='mui-slider-group mui-slider-loop'>"+model1Html+"</div>";
							var model1Html1="";
							for(var j=0;j<model1.length;j++){
								if(j==0){
									model1Html1=model1Html1+"<div class='mui-indicator mui-active'></div>";
								}else{
									model1Html1=model1Html1+"<div class='mui-indicator'></div>";
								}
							}
							model1Html1="<div class='mui-slider-indicator mui-text-right'>"+model1Html1+"</div>";
							model1Html=model1Html+model1Html1;
						}
						jQuery("#govSlider").append(model1Html);
						//调用图片自动移动的方法
						sliderUse();
						
						//model2
						var model2=data.result.area_1;
						var model2Html="";
						for(var v=0;v<model2.length;v++){
							model2Html=model2Html+"<li class='mui-table-view-cell mui-media'><a href='javascript:;' data-id='"+model2[v].id+"'><img class='mui-media-object mui-pull-left' src='"+model2[v].image+"' /><div class='mui-media-body'>"+model2[v].title+"<p class='mui-ellipsis'>"+model2[v].time+"</p></div></a></li>";
						}
						jQuery("#govModel2Ul").append(model2Html);
						
						//model3
						var model3=data.result.area_2;
						var model3Html="";
						for(var w=0;w<model3.length;w++){
							model3Html=model3Html+"<li class='mui-table-view-cell mui-media mui-col-xs-6 lmj-grid-li'><a href='javascript:;' data-id='"+model3[w].id+"'><img class='mui-media-object' src='"+model3[w].image+"' /><div class='mui-media-body'>"+model3[w].title+"<p class='mui-ellipsis'>"+model3[w].time+"</p></div></a></li>";
						}
						jQuery("#govModel3Ul").append(model3Html);
					}
				},
				error:function(xhr,type,errorThrown){
					console.log(xhr);
					console.log(type);
					console.log(errorThrown);
				}
			});
		},1000);
		
		function sliderUse(){
			//获得slider插件对象
			var slider = mui("#govSlider");
			slider.slider({
				interval: 5000
			});
		}
			
		var aniShow = "slide-in-right";
		//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
		if(!mui.os.android){
			aniShow = "pop-in";
		}
			
		mui('#govContent').on('tap', 'a', function() {
			var infoId=this.getAttribute("data-id");
			var webview_style = {
				popGesture: "close"
			};
			mui.openWindow({
				id: "info-details.html",
				url: "info-details.html",
				styles: webview_style,
				extras:{
					"infoId":infoId
				},
				show: {
					aniShow: aniShow
				},
				waiting: {
					autoShow: false
				}
			});
		});
    </script>
</html>